<template>
  <!-- 订单界面 -->
  <div id="Order">
    <!-- 顶部标题 -->
    <div class="header_title">
      <van-nav-bar title="订单" />
    </div>
    <!-- 导航栏 -->
    <div class="content_tab">
      <div v-if="loginNameData == ''">
        <van-tabs v-model="active">
          <van-tab v-for="tab in tabData" :key="tab" :title="tab"
            ><van-empty :description="'你没有' + tab + '订单'"
          /></van-tab>
        </van-tabs>
      </div>
      <div v-else>
        <van-tabs v-model="active">
          <van-tab title="全部订单">
            <div class="order">
              <!-- <van-card
                v-for="order in loginNameData"
                :key="order.id"
                :price="order.total + '.00'"
                :title="order.customer.username"
                :thumb="order.customer.idcardPhotoPositive"
                @click="clickOrder(order.id)"
                class="vanCard"
              >
                <template #tags>
                  <van-tag plain type="danger">{{ order.status }}</van-tag>
                  {{ order.orderTime | filter }}
                  {{ order.address }}
                </template>
              </van-card> -->
              <!-- <van-row
                v-for="order in loginNameData"
                :key="order.id"
                class="vanCard"
              >
                <van-col span="8">
                  <img
                    class="imgCard"
                    :src="order.customer.idcardPhotoPositive"
                    alt=""
                  />
                </van-col>
                <van-col span="16" style="padding: 10px">
                  <div>
                    <span>{{ order.customer.username }}</span>
                    <span style="color: rgb(240, 73, 73); float: right">{{
                      order.status
                    }}</span>
                  </div>
                </van-col>
                
              </van-row> -->
              <div
                class="order_item"
                v-for="order in loginNameData"
                :key="order.id"
                @click="clickOrder(order.id)"
              >
                <div class="flex_item1">
                  <img :src="order.customer.idcardPhotoPositive" alt="" />
                </div>
                <div class="flex_item2">
                  <span class="name">{{ order.customer.username }}</span>
                  <span class="status">{{ order.status }}</span>
                  <p class="address">{{ order.address }}</p>
                  <div class="date_pirce">
                    <div class="date">{{ order.orderTime | filter }}</div>
                    <div class="pirce">￥{{ order.total }}</div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="待派单">
            <div v-if="toSend == ''">
              <van-empty description="'你没有待派单订单'" />
            </div>
            <div v-else>
              <!-- <van-card
                v-for="send in toSend"
                :key="send.id"
                :price="send.total + '.00'"
                :title="send.customer.username"
                :thumb="send.customer.idcardPhotoPositive"
                @click="clickOrder(send.id)"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >{{ send.status }}
                    {{ send.address }}
                  </van-tag>
                </template>
              </van-card> -->
              <div class="order">
                <div
                  class="order_item"
                  v-for="send in toSend"
                  :key="send.id"
                  @click="clickOrder(send.id)"
                >
                  <div class="flex_item1">
                    <img :src="send.customer.idcardPhotoPositive" alt="" />
                  </div>
                  <div class="flex_item2">
                    <span class="name">{{ send.customer.username }}</span>
                    <span class="status">{{ send.status }}</span>
                    <p class="address">{{ send.address }}</p>
                    <div class="date_pirce">
                      <div class="date">{{ send.orderTime | filter }}</div>
                      <div class="pirce">￥{{ send.total }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="待接单">
            <div v-if="waitingList == ''">
              <van-empty description="'你没有待接单订单'" />
            </div>
            <div v-else>
              <!-- <van-card
                v-for="waiting in waitingList"
                :key="waiting.id"
                :price="waiting.total + '.00'"
                :title="waiting.customer.username"
                :thumb="waiting.customer.idcardPhotoPositive"
                @click="clickOrder(waiting.id)"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >{{ waiting.status }}
                    {{ waiting.address }}
                  </van-tag>
                </template>
              </van-card> -->
              <div class="order">
                <div
                  class="order_item"
                  v-for="waiting in waitingList"
                  :key="waiting.id"
                  @click="clickOrder(waiting.id)"
                >
                  <div class="flex_item1">
                    <img :src="waiting.customer.idcardPhotoPositive" alt="" />
                  </div>
                  <div class="flex_item2">
                    <span class="name">{{ waiting.customer.username }}</span>
                    <span class="status">{{ waiting.status }}</span>
                    <p class="address">{{ waiting.address }}</p>
                    <div class="date_pirce">
                      <div class="date">{{ waiting.orderTime | filter }}</div>
                      <div class="pirce">￥{{ waiting.total }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="待确认">
            <div v-if="toConfirmed == ''">
              <van-empty description="'你没有待确认订单'" />
            </div>
            <div v-else>
              <!-- <van-card
                v-for="confirmed in toConfirmed"
                :key="confirmed.id"
                :price="confirmed.total + '.00'"
                :title="confirmed.customer.username"
                :thumb="confirmed.customer.idcardPhotoPositive"
                @click="clickOrder(confirmed.id)"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >{{ confirmed.status }}
                    {{ confirmed.address }}
                  </van-tag>
                </template>
              </van-card> -->
              <div class="order">
                <div
                  class="order_item"
                  v-for="confirmed in toConfirmed"
                  :key="confirmed.id"
                  @click="clickOrder(confirmed.id)"
                >
                  <div class="flex_item1">
                    <img :src="confirmed.customer.idcardPhotoPositive" alt="" />
                  </div>
                  <div class="flex_item2">
                    <span class="name">{{ confirmed.customer.username }}</span>
                    <span class="status">{{ confirmed.status }}</span>
                    <p class="address">{{ confirmed.address }}</p>
                    <div class="date_pirce">
                      <div class="date">{{ confirmed.orderTime | filter }}</div>
                      <div class="pirce">￥{{ confirmed.total }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="已完成">
            <div v-if="finished == ''">
              <van-empty description="'你没有已完成订单'" />
            </div>
            <div v-else>
              <!-- <van-card
                v-for="finish in finished"
                :key="finish.id"
                :price="finish.total + '.00'"
                :title="finish.customer.username"
                :thumb="finish.customer.idcardPhotoPositive"
                @click="clickOrder(finish.id)"
              >
                <template #tags>
                  <van-tag plain type="danger"
                    >{{ finish.status }}
                    {{ finish.address }}
                  </van-tag>
                  {{ finish.orderTime | filter }}
                </template>
              </van-card> -->
              <div class="order">
                <div
                  class="order_item"
                  v-for="finish in finished"
                  :key="finish.id"
                  @click="clickOrder(finish.id)"
                >
                  <div class="flex_item1">
                    <img :src="finish.customer.idcardPhotoPositive" alt="" />
                  </div>
                  <div class="flex_item2">
                    <span class="name">{{ finish.customer.username }}</span>
                    <span class="status">{{ finish.status }}</span>
                    <p class="address">{{ finish.address }}</p>
                    <div class="date_pirce">
                      <div class="date">{{ finish.orderTime | filter }}</div>
                      <div class="pirce">￥{{ finish.total }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer" style="height: 100px"></div>
    <div></div>
  </div>
</template>

<script>
// 引入axios
import { get, post, post_json } from "@/http/axios";
// 引入vuex辅助函数
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
// 引入时间模块
import moment from "moment";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      active: 0,
      list: {
        page: 1,
        pageSize: 100,
      },
      orderData: [],
      userName: "",
      loginNameData: [],
      // username1: [],
      tabData: ["全部订单", "待派单", "待接单", "待确认", "已完成"],
      // 待派单
      toSend: [],
      // 待接单
      waitingList: [],
      // 待确认
      toConfirmed: [],
      // 已完成
      finished: [],
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState("user", ["token", "userInfo"]),
  },
  //方法集合
  methods: {
    // 引入vuex中的mutations
    ...mapActions("user", ["getUserInfo"]),
    /**
     * @description: 获取全部订单数据
     * @param {*}
     * @return {*}
     * @author: MQJ
     */
    async getAllOrderData() {
      // 获取全部数据
      let res = await get("/order/pageQuery", this.list);
      // 将其进行赋值
      this.orderData = res.data.data.list;
      // 获取用户登录的token值
      let r = this.token;
      // 拿取用户登录的数据
      let res1 = await get("/user/info", { token: r });

      // 获取用户登录的姓名
      this.userName = res1.data.data.username;
      // 将登录的用户进行相关的赋值操作
      for (let index = 0; index < this.orderData.length; index++) {
        if (this.orderData[index].customer.username == this.userName) {
          this.loginNameData.push(this.orderData[index]);
          this.loginNameData[index].address =
            this.loginNameData[index].address.province +
            this.loginNameData[index].address.city +
            this.loginNameData[index].address.area +
            this.loginNameData[index].address.address;
        }
      }
      // console.log(this.loginNameData[1].address);
      // console.log(this.loginNameData);
      JSON.stringify(this.loginNameData);
      // 对其进行相关赋值操作
      this.toSend = this.loginNameData.filter(
        (item) => item.status == "待派单"
      );
      this.waitingList = this.loginNameData.filter(
        (item) => item.status == "待接单"
      );
      this.toConfirmed = this.loginNameData.filter(
        (item) => item.status == "待确认"
      );
      this.finished = this.loginNameData.filter(
        (item) => item.status == "已完成"
      );
    },
    // 点击商品时触发
    clickOrder(id) {
      console.log(id);
      this.$router.push({ path: "OrderDetails", query: { id: id } });
    },
  },
  filters: {
    filter: function (data) {
      return moment(data).format("YYYY-MM-DD hh:mm:ss");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 获取用户的id
    // this.getUserInfo().then((r) => {
    //   this.list.customerId = this.userInfo.id;
    //   this.getAllOrderData();
    // });
    this.getAllOrderData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* .cardStyle {
  margin: 10px;
}
.vanCard {
  height: 100px;
  margin: 10px;
  border-radius: 15px;
  box-shadow: 2px 2px 1px #888888;
}
.imgCard {
  height: 70px;
  width: 70px;
  border-radius: 50px;
  margin: 10px;
}
.van-card__thumb img {
  border-radius: 50px;
} */
.order {
  margin-top: 1em;
  padding: 0 2em;
}
.order .order_item {
  width: 93%;
  height: 87px;
  margin: 0 0 20px 0;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
}
.order .order_item .flex_item1 {
  width: 80px;
  height: 80px;
  /* background-color: #9002bf; */
  border-radius: 50%;
}
.order .order_item .flex_item1 img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.order .order_item .flex_item2 {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.order .order_item .flex_item2 .status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.order .order_item .flex_item2 .address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
.date_pirce {
  margin-top: 0.5em;
  font-size: 12px;
}
.date {
  float: left;
}
.pirce {
  float: right;
  margin: -3px;
  text-align: right;
}
</style>